﻿
<style type="text/css">
    .slider{margin:5px auto;width:485px;height:340px;border:1px solid #ccc;position:relative;overflow:hidden;}
    .conbox{position:absolute}
    .switcher{position:absolute;bottom:10px;right:10px;float:right;z-index:99;}
    .switcher a{background:#fff;border:1px solid #D00000;cursor:pointer;float:left;font-family:arial;height:18px;line-height:18px;width:18px;margin:4px;text-align:center;color:#D00000;}
    .switcher a.cur,.switcher a:hover{background:#FF0000;border:1px solid #D00000;height:24px;line-height:24px;width:24px;margin:0 2px;color:#fff;font-weight:800;}
   
</style>
<div id="slider3" class="slider">
	<div class="conbox">
        @foreach (var item in ViewBag.WorkList)
        {
            <div>
               
                <a href="#" title="@item.title" onclick="javascript:parent.addTab('@item.title','Work/View/@item.id')">
                <img width="480" height="320" alt="@item.title"
                 src="@Url.Action("ShowSmall", "Photo", new {photo_type="Work", id = item.image_url })"/></a>
                <span> @item.title</span>
            </div>
        }
	</div>
	<div class="switcher">
        @{
            int pos=0;
            foreach (var item in ViewBag.WorkList)
            {
                pos++;
                if (pos == 1)
                { 
                    <a href="#" class="cur">@pos</a>
                }
                else
                {
                    <a href="#">@pos</a>
                }
            }
        }
	</div>
</div>

<script type="text/javascript">
    $("#slider3").Xslider({
        affect: 'fade',
        ctag: 'div'
    });
</script>